<template>
    <!-- 只有大于总页数大于1的时候才显示 -->
  <div class="pager-container" v-if="getPageNumber>1">
      <a @click="handleClick(1)"  :class="{disabled:current===1}">|&lt;&lt;</a>
      <a @click="handleClick(current-1)"  :class="{disabled:current===1}">&lt;&lt;</a>
      <a @click="handleClick(n)"   v-for="(n,i) in numbers" :key="i" :class="{active:current===n}">{{n}}</a>
      <a @click="handleClick(current+1)"   :class="{disabled:current===getPageNumber}">&gt;&gt;</a>
      <a @click="handleClick(getPageNumber)"   :class="{disabled:current===getPageNumber}">&gt;&gt;|</a>
  </div>
</template>

<script>
export default {
    props:{
        current:{
            type:Number,
            default: 1,
        },
        total:{
            type:Number,
            default:0
        },
        limit:{
            type:Number,
            default:10,
        },
        visableNumber:{
            type:Number,
            default:10,
        }


    },
    computed:{
        getPageNumber(){
            return Math.ceil(this.total/this.limit);
        },
        //最小数字
        visableMin(){
            let min = this.current-Math.ceil(this.visableNumber/2);
            if(min<1){
                min=1;
            }
            return min;
        },
        //最大页数
        visableMax(){
            let max = this.visableMin+this.visableNumber-1;
            if(max>this.getPageNumber){
                max=this.getPageNumber;
            }
            return max;

        },
        //获取数组
        numbers(){
            let pageNum = [];
            for(let i=this.visableMin;i<this.visableMax;i++){
                pageNum.push(i);
            }
            return pageNum;
            
        },
        

    },
    methods:{
        handleClick(currentPage){
            if(currentPage<1){
                currentPage=1;
            }
            if(currentPage>this.getPageNumber){
                currentPage=this.getPageNumber;
            }
            if(currentPage===this.current){
                return;
            }
            this.$emit("changePage",currentPage);
        }
    }
    
}
</script>

<style lang="less" scoped>
@import '~@/styles/var.less';
   .pager-container{
       display: flex;
       justify-content: center;
       margin: 20px 0;
       a{
           color: @primary;
           cursor:pointer;
           margin: 0 7px;
           &.disabled{
               color: @lightWords;
               cursor: not-allowed;
           }
           &.active{
               color:@dark;
               cursor:text;
           }
       }
   }
</style>